<template>
   <div class="wrap">
      <myHead title="订单详情"></myHead>
      <div class="content">
         <div class="head">
            <p>
               <span>等待买家付款</span>
               <span>还剩3天17小时自动确认</span>
            </p>
            <img src="../../../static/img/esdd001.png" alt="">
         </div>
         <div class="address">
            <img src="../../../static/img/dingwei001001.png" alt="">
            <div class="address-info">
               <p>广东省深圳市坂田区长坑路XX大道</p>
               <span>李骞&emsp;157****1234</span>
            </div>
         </div>
         <div class="fg"></div>
         <!-- 订单 -->
         <div class="order-item">
            <div class="order-item-tit">
               <p>订单号:2020191016778888666</p>
               <p>已结算</p>
            </div>
            <div class="order-box">
               <div class="order-box-top">
                  <div class="order-box-left">
                     <img src="../../../static/img/shop1.png" alt="">
                  </div>
                  <div class="order-box-right">
                     <div class="order-box-r-tit">
                        <p>周末特惠套餐香锅冒菜套餐香锅冒菜套餐香锅冒菜</p>
                        <p>￥199</p>
                     </div>
                     <div class="order-box-r-time">
                        <p>黑色 XL</p>
                        <p><span>x</span>1</p>
                     </div>
                  </div>
               </div>
               <div class="order-box-bot">
                  <p>共计1件商品&ensp;合计:&ensp;<span>￥16900</span>(含运费￥0)</p>
               </div>
            </div>
         </div>
         <div class="fg"></div>
         <div class="zf-time">
            <div>
               <p>订单编号:</p>
               <p>1545646546546</p>
            </div>
            <div>
               <p>支付方式:</p>
               <p>线上支付</p>
            </div>
            <div>
               <p>下单时间:</p>
               <p>2019.06.18  16：48</p>
            </div>
            <div>
               <p>发货时间:</p>
               <p>2019.06.18  18：06</p>
            </div>
            <div>
               <p>快递方式:</p>
               <p>快递物流</p>
            </div>
            <div>
               <p>运单编号:</p>
               <p>17546546546</p>
            </div>
         </div>
      </div>
      <footer>
         <p class="btned" @click="cansel">取消订单</p>
         <p>去付款</p>
      </footer>
      <!--  询问弹窗  -->
      <van-dialog v-model="show" title="确定取消吗？" show-cancel-button width="3.2rem" @confirm="confirm"></van-dialog>
   </div>
</template>

<script>
    import myHead from "../../components/ClientComponents/lib/myHead"

    export default {
        name: "twoHandsOrderDetails",
        components: {
            myHead
        },
        data(){
            return{
                show:false
            }
        },
        methods:{
            cansel(){
                this.show = true;
            },
            confirm(index,state){
               this.show = false;
            }
        }
    }
</script>

<style scoped>
   .wrap {
      padding-top: .5rem;
   }
   .head {
      height:.8rem;
      background:linear-gradient(90deg,rgba(255,142,65,1),rgba(255,110,0,1));
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 .2rem;
   }
   .head>p {
      height: .5rem;
      display: flex;
      flex-flow: column;
      justify-content: space-around;
      color: #FFFFFF;
      font-family:PingFang SC;
   }
   .head>p>span:nth-child(1) {
      font-size:.15rem;
   }
   .head>p>span:nth-child(2) {
      font-size: .12rem;
   }
   .head>img {
      width: .57rem;
      height: .5rem;
   }

   .address {
      height: .65rem;
      display: flex;
      flex-flow: row;
      align-items: center;
      padding: 0 .2rem;
      position: relative;
   }
   .address>img:nth-child(1) {
      width: .3rem;
      height: .3rem;
      margin-right: .1rem;
   }
   .address-info {
      min-width: 2.4rem;
      display: flex;
      flex-flow: column;
      justify-content: space-between;
   }
   .address-info>p {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size:.13rem;
      font-family:PingFang SC;
      color: #333333;
   }
   .address-info>span {
      font-size:.13rem;
      font-family:PingFang SC;
      color: #333333;
   }
   .address>img:nth-child(3) {
      width: .09rem;
      height: .15rem;
      position: absolute;
      right: .2rem;
   }
   .fg {
      width: 100%;
      height: .05rem;
      background-color: #F0F0F0;
   }
   .order-item {
      background-color: #FFFFFF;
   }
   .order-item-tit {
      height: .4rem;
      box-sizing: border-box;
      padding: 0 .15rem;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
      border-bottom: .01rem solid #E2E2E2;
      margin-bottom: .1rem;
   }
   .order-item-tit>p {
      height: 100%;
      line-height: .4rem;
   }
   .order-item-tit>p:nth-child(1) {
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:400;
      color: #333333;
   }
   .order-item-tit>p:nth-child(2) {
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:400;
      color: #FF7002;
   }
   .order-box-top {
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
   }
   .order-box-left {
      width: .65rem;
      height: .65rem;
      padding-right: .1rem;
      border-radius: .03rem;
   }
   .order-box-left>img {
      width: 100%;
      height: 100%;
   }
   .order-box-right {
      width: calc(100% - .65rem);
      height: .65rem;
      display: flex;
      flex-flow: column;
      justify-content: space-between;
   }
   .order-box-r-tit {
      display: flex;
      flex-flow: row;
      align-items: flex-start;
      justify-content: space-between;
   }
   .order-box-r-tit>p {
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:400;
      color:rgba(51,51,51,1);
      line-height:.18rem;
   }
   .order-box-r-tit>p:nth-child(1){
      width: 80%;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
   }
   .order-box {
      padding: 0 .15rem;
   }
   .order-box-r-time {
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
   }
   .order-box-r-time>p {
      line-height: .2rem;
      font-size:.14rem;
      font-family:PingFang SC;
      color: #999999;
   }
   .order-box-bot {
      height: .4rem;
      display: flex;
      flex-flow: row;
      align-items: center;
      text-align: right;
   }
   .order-box-bot>p{
      width: 100%;
      font-size:.12rem;
      font-family:PingFang SC;
      color: #333333;
   }
   .order-box-bot>p>span {
      color: #FF3C3C;
   }
   .zf-time {
      padding: .15rem .15rem;
   }
   .zf-time>div {
      height: .3rem;
      display: flex;
      flex-flow: row;
      align-items: center;
      font-size:.14rem;
      font-family:PingFang SC;
      color: #333333;
   }
   .zf-time>div>p:nth-child(1) {
      width: .7rem;
   }
   footer {
      width: 100%;
      box-sizing: border-box;
      height: .65rem;
      background-color: #FFFFFF;
      position: fixed;
      bottom: 0;
      left: 0;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: flex-end;
      padding: 0 .15rem;
   }
   footer>p {
      height:.27rem;
      background:rgba(255,112,2,1);
      border-radius:.13rem;
      box-sizing: border-box;
      padding: 0 .1rem;
      text-align: center;
      line-height: .27rem;
      font-size:.12rem;
      font-family:Source Han Sans CN;
      font-weight:400;
      color: #FFFFFF;
      margin-left: .1rem;
   }
   .btned {
      border:.01rem solid rgba(255,112,2,1);
      background-color: #FFFFFF;
      color: #FF7002;
   }

   /* 弹窗 */
   /deep/ .van-dialog {
      font-size: .16rem !important;
      border-radius: .16rem !important;
      width: 3.2rem !important;

   }
   >>> .van-button--large {
      line-height: .48rem;
      height: .5rem;
   }
   >>> .van-button {
      font-size: .16rem;
      border-radius: .02rem;
   }
   >>> .van-dialog__header {
      line-height: .24rem;
   }
   >>> .van-dialog__header--isolated {
      padding: .24rem 0;
   }
</style>